<template>
  <div>
    <el-form :model="formData" rel="form" label-width="100px">
      <el-form-item label="设备ID">
        {{detail.deviceid}}
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="formData.title" placeholder="设备名称"></el-input>
      </el-form-item>
      <el-form-item label="获取地图">
        {{detail.longitude}},{{detail.latitude}}
      </el-form-item>
      <el-form-item label="项目">
        <el-select v-model="formData.project_id" placeholder="项目">
          <el-option v-for="(item,key,index) in projectArr" :key="index" :label="item" :value="key" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="子项目" >
      <el-row>
      <el-col :span="8">
        栋
        <el-select v-model="formData.project_2_id" placeholder="栋">
          <el-option v-for="(item,index) in projectArr2" :key="index" :label="item.name" :value="item.id" ></el-option>
        </el-select>
        </el-col>
        <el-col :span="8">
        楼
        <el-select v-model="formData.project_3_id" placeholder="楼">
          <el-option v-for="(item,index) in projectArr3" :key="index" :label="item.name" :value="item.id" ></el-option>
        </el-select>
        </el-col>
        <el-col :span="8">
        层
        <el-select v-model="formData.project_4_id" placeholder="层">
          <el-option v-for="(item,index) in projectArr4" :key="index" :label="item.name" :value="item.id" ></el-option>
        </el-select>
        </el-col>
        </el-row>
      </el-form-item>      
      <el-form-item label=""><el-button type="primary" @click="submit">提交</el-button></el-form-item>
    </el-form>    
  </div>
</template>

<script>
  import {edit,editpost,subprojectlist} from "@/api/equipment/index.js"

  export default {
    props:['deviceid'],
    watch:{
      deviceid:{
        handler:function(val){
          if(val){
            this.query.deviceid = val;
            this.getData()
          }
        },
        immediate:true
      },
      "formData.project_id":{
        handler:function(val){
          if(val){
            subprojectlist({pid:val}).then(res=>{
              this.projectArr2 = res.data
            })
          }
        },
        immediate:true,
      },
      "formData.project_2_id":{
        handler:function(val){
          if(val){
            subprojectlist({pid:val}).then(res=>{
              this.projectArr3 = res.data
            })
          }
        },
        immediate:true,
      },
      "formData.project_3_id":{
        handler:function(val){
          if(val){
            subprojectlist({pid:val}).then(res=>{
              this.projectArr4 = res.data
            })
          }
        },
        immediate:true,
      }
    },
    data(){
      return {
        query:{
          deviceid:'',
        },
        area:{},
        city:{},
        detail:{},
        projectArr:{},
        projectArr2:{},
        projectArr3:{},
        projectArr4:{},
        provinces:{},
        town:{},
        formData:{
          title:"智慧管家",
          area:"",
          deviceid:"TS527D316",
          mapinfoid:"22.751149,113.819955",
          project_id:"",
          project_2_id:"",
          project_3_id:"",
          project_4_id:""
        },

      }
    },
    methods:{
      getData(){
        edit(this.query).then(res=>{
          console.log("编辑数据",res)
          this.area = JSON.parse(res.data.area)
          this.city = JSON.parse(res.data.city)
          this.detail = res.data.detail;
          this.projectArr = JSON.parse(res.data.projectArr)
          this.provinces = JSON.parse(res.data.provinces)
          this.town = JSON.parse(res.data.town)
          this.formData.deviceid = this.detail.deviceid
          this.formData.title = this.detail.title
          this.formData.project_id = this.detail.project_id+""
          this.formData.project_2_id = this.detail.project_2_id
          this.formData.area = this.detail.area_name
          this.formData.mapinfoid = this.detail.longitude+','+this.detail.latitude
        })
      },
      submit(){
        editpost(this.formData).then(res=>{
          this.$message.success("修改成功")
        })
      }
    }
  }
</script>

<style scoped>

</style>